<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div class="block">
                    <span class="demonstration">注册时间</span>
                    <el-date-picker
                            v-model="value2"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>

                </div>
            </el-col>
            <el-col :span="7">
                <el-col :span="4.5">
                    <span style="line-height:40px">好友账号：</span>
                </el-col>
                <el-col :span="17">
                    <el-input type="text" style="display: inline"></el-input>
                </el-col>

            </el-col>
            <el-col :span="5">
                <el-button type="primary">查询</el-button>
            </el-col>
        </el-row>
        <div>
            <el-table
                    :data="list"
                    style="width: 100%;text-align: center;height: 500px">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        :formatter="dateFormat"
                        prop="add_time"
                        label="好友注册时间"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="好友账号">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[3,10,30, 200, 300, 400]"
                        :page-size="limit"
                        @current-change="current_change"
                        @size-change="handleSizeChange"
                        :total="count">
                </el-pagination>
            </div>
        </div>

        <p class="p" style="margin: 0 auto;text-align: center">| 广州市俊霖电子商务有限公司| 粤ICP备18126514号</p>

    </div>
</template>

<script>
  import { View, cancel, submit,lower_level } from '@/api/task'
  export default {
    name: 'tuiguanghaoyou',
    data() {
      return {
        count: 0,
        limit: 10,
        currentPage: 1,
        list: [
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value1: '',
        value2: ''
      }
    },
    created() {
      this.fetch_task(1, this.limit)
    },
    methods: {
      fetch_task(page, limit, where = '') {
        lower_level({ 'page': page, 'limit': limit, 'where': where = '' }).then(res => {
          this.list = res.data.list
          console.log(res)
          console.log(this.tableData)
        }).catch(error => {
          console.log(error)
        })
      },
      handleSizeChange(val) {
        this.limit = val
        this.fetch_task(1, this.limit)
        console.log(this.limit)
      },
      current_change: function(currentPage) {
        this.fetch_task(currentPage, this.limit)
      },
      dateFormat: function(row, column) {
        var timeStamp = row[column.property]
        if (timeStamp == undefined) {
          return ''
        }
        var date = new Date()
        date.setTime(timeStamp * 1000)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        var minute = date.getMinutes()
        var second = date.getSeconds()
        minute = minute < 10 ? ('0' + minute) : minute
        second = second < 10 ? ('0' + second) : second
        return y + '-' + m + '-' + d
      }
    }
  }
</script>

<style scoped>
    .tr {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0;
        padding: 0;
        border: 1px solid;


    }

    td th {
        width: 33%;
        height: auto;

    }
</style>
